<template>
  <div id='DJSLchart' style="width: 600px;height:200px;margin:0 auto;"></div>
</template>

<script>
  import echarts from 'echarts'
  import {GETDJSLDATA} from '@/../static/js/apis.js'

  export default {
    name: "DJSLchart",
    methods: {
      //绘制图形
      drawChart(level1, level2, level3) {
        //展示6年内数据
        const year = new Date().getFullYear();
        let years = []
        for (let i = 5; i >= 0; i--) {
          years.push(year - i)
        }
        let myChart = echarts.init(document.getElementById('DJSLchart'))
        let options = {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}年 : {c}家"
          },
          legend: {
            data: ['一级', '二级', '三级']
          },
          xAxis: {
            data: years,
            type: 'category',
            name: '年份'
          },
          yAxis: {
            name: '数量'
          },
          series: [{
            name: '一级',
            type: 'bar',
            data: level1
          }, {
            name: '二级',
            type: 'bar',
            data: level2
          }, {
            name: '三级',
            type: 'bar',
            data: level3
          }]
        }
        myChart.setOption(options, true)
      },
      //获取数据
      getData() {
        const self = this;
        GETDJSLDATA('', function (res) {
          if (res.levelData1 && res.levelData2 && res.levelData3) {
            //绘制图形
            self.drawChart(res.levelData1, res.levelData2, res.levelData3);
          }
        })
      }
    },
    mounted() {
      this.getData();
    }
  }

</script>

<style scoped>

</style>
